<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>登录模拟</title>
    <!-- import CSS -->
  </head>
  <body>
    <div id="app">
      <h1>登录模拟流程 {{hello}}</h1>
      <p><a href="/swagger-ui.html#/%E8%AE%A4%E8%AF%81/controller-mock%5Cauth-login" target="_blank">swagger 接口地址</a></p>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="box-card">
            <h2>数组refs</h2></h2>
            <div v-for="(item, i) in list" :ref="el => { if (el) divRefs[i] = el }">{{ item }}</div>
            <el-divider direction="horizontal" content-position="left"></el-divider>
            <el-button @click="getRefs" type="primary">数组refs</el-button>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card>
            <h2>注册表单 独立ref registerForm</h2>
            <el-form :model="registerForm" ref="registerFormRef" :rules="rules" label-width="100px" class="demo-registerForm">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="registerForm.phone"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="registerForm.password"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="registerSubmit()">提交</el-button>
                <el-button @click="resetRegisterForm()">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>

      <el-col :span="8">
        <el-card>
          <!-- 方法一 -->
          <!-- 方法2 -->
          <!-- <el-form :model="itemForm" :ref="'refForm'+i"  :rules="rules"  label-width="100px" class="demo-registerForm"> -->
          <el-row :gutter="20"  v-for="(itemForm, i) in listForms" >
            <el-form :model="itemForm" :ref="el => { if (el) listFormRefs[i] = el }"  :rules="rules"  label-width="100px" class="demo-registerForm">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="itemForm.phone"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="itemForm.password"></el-input>
              </el-form-item>
            </el-form>
            <el-button @click="removeForm(i)">移除</el-button>
          </el-row>
          <el-button @click="addForm()">添加</el-button>
          <el-button type="primary" @click="registerSubmitAll()">提交全部</el-button>
        </el-card>
      </el-col>

    </div>
  </body>

  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.min.js"></script> -->
  <script src="lib/vue/vue@3.2.9-global.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="lib/element-ui/element-plus@1.1.0-beta.9.css" />
  <!-- <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css" /> -->
  <!-- 引入组件库 -->
  <script src="lib/utils/js.cookie.min.js"></script>
  <!-- <script src="//unpkg.com/element-plus"></script> -->
  <script src="lib/element-ui/element-plus@1.1.0-beta.9.js"></script>
  <script src="lib/axios/axios.min.js"></script>
  <script>
    console.log(Vue);
    console.log(ElementPlus);
    console.log(axios);

    let app = Vue.createApp({
      mounted() {
        console.log('mounted ....', this.hello);
      },
      setup() {
        const ref = Vue.ref;
        const reactive = Vue.reactive;
        const toRefs = Vue.toRefs;
        const onMounted = Vue.onMounted;
        const onBeforeUpdate = Vue.onBeforeUpdate;
        let { ctx } = Vue.getCurrentInstance();

        const list = reactive([1, 2, 3]);
        const divRefs = ref([]);
        const listFormRefs = ref([]);

        const registerFormRef = ref(null);

        const state = reactive({
          listForms:[{id:21}],
          status: 1,
          user: { id: null, phone: '', name: '', avatar: '' },
          userList: [{ name: '少年阿虎', phone: '13512345678', password: '123456' }],
          loginForm: { phone: '13311111111', password: '123456' },
          registerForm: { phone: '19911111111', password: '123456' },
          rules: {
            phone: [{ required: 'true', message: '账户不能为空', trigger: 'blur' }],
            password: [{ required: 'true', message: '密码不能为空', trigger: 'blur' }],
          },
        });

        // 确保在每次更新之前重置ref
        onBeforeUpdate(() => {
          console.log('onBeforeUpdate...');
          divRefs.value = [];
          listFormRefs.value  = [];
        });

        const getRefs = ()=>{
          console.log('getRefs...');

          console.log(divRefs);
          console.log(divRefs.value);
        }

        
        const addForm = () => {
          console.log('addForm ....', state.registerForm);
          state.listForms.push({id:Date.now()})
        }
        
        const removeForm = (i) => {
          console.log('removeForm ....', state.registerForm);
          state.listForms.splice(i,1)
        }

        
        const registerSubmit = () => {
          console.log('registerSubmit ....', state.registerForm);

          registerFormRef.value.validate(v=>{
            console.log(v);
          })


        }

        
        const registerSubmitAll = () => {
          console.log('registerSubmitAll ....', state.registerForm);

          console.log(listFormRefs);
          console.log(listFormRefs.value);
          console.log(listFormRefs.value[0]);

          // 方法一
          listFormRefs.value[0].validate(v=>{
            console.log(1111,v);
          })

          // 方法2
          // ctx._.refs['refForm1'].validate(v=>{
          //   console.log(2222,v);
          // })


        }

        return {
          ...toRefs(state),
          registerSubmit,
          registerSubmitAll,
          registerFormRef,
          ctx,
          getRefs,
          list,
          addForm,
          removeForm,
          listFormRefs,
          divRefs,
        };
      },
    });
    app.use(ElementPlus);
    app.mount('#app');
  </script>
</html>
